
<template>
	<div id="box">
		<img src="static/img/logo.png"/>
		<div class="headx">
				<p @click="ppp">
					<router-link tag="span" to="/dl" id="active">短信登陆</router-link>
					<router-link tag="span" to="/mmdl">密码登录</router-link>
				</p>
		</div>
				<router-view/>
		<div class="foote">
			<router-link tag="button" to="/duh">登录</router-link>
			<p>关于我们</p>
		</div>
	</div>
</template>

<script>
export default {
		data() {
			return {
				// ws:false,
			}
		},
		methods: {
			//事件
			ppp(e){
					for(var i=0;i<this.pp.length;i++){
							this.pp[i].id = "";
					}
					e.target.id = "active";
			},
		},
		mounted(){
			//原生js
			this.pp=document.querySelectorAll(".headx p span");
		}
	}
</script>

<style scoped lang="less">
  .px2rem(@name, @px){
    @{name}: @px / 37.5 * 1rem;
  }
#box{
	display: flex;
	flex-direction:column;
	justify-content: center;
	align-items: center;
	img{
		.px2rem(width,153);
		.px2rem(height,145);
	}
	.headx>p{
		.px2rem(width,170);
		.px2rem(margin-bottom,8);
		display: flex;
		justify-content: space-between;
		span{
			.px2rem(padding,5);
			border-bottom:1px solid #000;
			.px2rem(border-width,2);
			.px2rem(font-size,15);
		}
	}
}
#active{
	color: rgb(35,149,255);
	font-weight:bold;
	border-color:rgb(35,149,255) !important;
}
.foote{
	display: flex;
	flex-direction:column;
	.px2rem(height,90);
	.px2rem(margin-top,20);
	width: 85vw;
	&>*{
		flex:1%;
	}
	button{
		width: 100%;
		.px2rem(font-size,15);
		border: none;
		border-radius:10px;
		color: #fff;
		background: rgb(76,217,111);
	}
	p{
		text-align: center;
		.px2rem(font-size,13);
		width: 100%;
		.px2rem(line-height,45);
		color: #999;
	}
}
</style>